<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/template-web.js"></script>

    <style>
        tr {
            text-align: center
        }
    </style>
    <title>Document</title>
</head>

<body>



    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>

            </tr>
        </thead>
        <tbody>
            <%for(var i=0;i<cont.length;i++){%>
                <tr>
                    <td>
                        <%=cont[i].name%>
                    </td>
                    <td>
                        <%=cont[i].age%>
                    </td>

                </tr>
                <%}%>

        </tbody>
    </table>
    <div>
        <%if(page==0){%>
            <a href="javascript:;">上一页</a>
            <%}else{%>
                <a href="du?page=<%=page-1%>">上一页</a>
                <%}%>
                    <span>

          <%for(var i=0;i<Zys;i++){%>         
         
            <%if(i==page){%>  
                  <a href="du?page=<%=i%>"style="color:red"><%=i+1%></a> 
            <%}else{%>  
                    <a href="du?page=<%=i%>"><%=i+1%></a> 
             <%}%>
          <%}%>
           
       </span>
                    <%if(page==Zys-1){%>
                        <a href="javascript:;">下一页</a>
                        <%}else{%>
                            <a href="du?page=<%=page+1%>">下一页</a>
                            <%}%>

    </div>




    <p>上面的分页是同步分页下面是异步ajax分页</p>





    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody id="ajax—body">

        </tbody>
    </table>
    <div id="ajax-ys">
        <a href="###" id="ajax—syy">上一页</a>
        <span id="ajax-ym">
                
            </span>
        <a href="###" id="ajax—xyy">下一页</a>
    </div>


</body>


        

</html>
<script>
    var qjdx = {}                                   //全局对象

    function fy(json) {
        if (arguments.length == 2) {                        //判断是否有回调函数传进来
            var callback = arguments[1]
        }
        $.post("/fy", json, function (result) {

            qjdx = result

            var Nr = ''
            for (var i = 0; i < result.cont.length; i++) {      //主题内容搞定
                var data = result.cont[i]
                var aa = template('mb1')
                var html = aa(data)
                Nr += html
            }
            var Ys = ''
            for (var i = 1; i < result.Zys + 1; i++) {                   //页数搞定
                if (i-1 == result.page ) {
                  Ys += ' <a href="###" style="color:red;">' + i + '</a>'
                  
                }else{
                  Ys += ' <a href="###">' + i + '</a>'
                }

            }
            $('#ajax—body').html(Nr)
            $('#ajax-ym').html(Ys)
            bb()                                                  //加载动态事件
            if (callback) {                                       //有回调的话执行
                callback(result);
            }

        });
    }

    function aa() {                                                 //静态事件
        $('#ajax—syy').click(function () {                          //上一页
            if (qjdx.page == 0) {
                fy({ page: qjdx.page })
            } else {
                fy({ page: qjdx.page - 1 })
            }
        })
        $('#ajax—xyy').click(function () {                          //下一页
            if (qjdx.page == qjdx.Zys - 1) {
                fy({ page: qjdx.page })
            } else {
                fy({ page: qjdx.page + 1 })
            }
        })
    }
    function bb() {
        $('#ajax-ym a').click(function () {
            fy({ page: $(this).html() - 1 })
        })

    }


    $(function () {
        
        fy({ page: 0 }, aa)         

    })

</script>

<script type=" text/template" id="mb1"> //主题内容模板
    <tr>
        <td>{{name}}</td>
        <td>{{age}}</td>
    </tr>
</script>